ivankuivanku | chord lirikivanku | chord lirikivanku | chord lirik

MERUBAH BACKGROUND BLOG

Mengganti background blog, sebenarnya ada dua cara yang bisa kalian laukan untuk merubah tampilan background blog. Yang pertama merubah tampilan background warna, dan yang ke dua mngganti tampilan dengan menggunakan gambar / image.

Untuk merubah tampilan dengan menggunakan gambar sobat harus siapkan alamat gambar/image yang sudah terupload ke tempat hosting di mana sobat menyimpan gambar/image. Untuk cara uploadnya sudah saya terangkan pada posting yang lalu, kalo lupa klik di sini. Dengan ukuran gambar yang kecil saja.

Biar lebih jelas akan saya terangkan bagaimana cara merubah background nenggunakan gambar dan warna. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah template asli blogger yaitu template minima.

  • Mengganti Warna Background.


  • Untuk template minima klasik :

    1. Sign in.

    2. Klik menu Template.

    3. Klik menu Edit HTML.

    4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
    5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus kalian rubah) Jika sobat kebingungan tentang kode warna, sobat bisa lihat di sini untuk mencari kode warna yang sobat inginkan :



    6. body {
      background: #fff;
      margin:0;
      padding:40px 20px;
      font:x-small Georgia,Serif;
      text-align:center;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }


      Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :


      body {
      background: #E7E3E3;
      margin:0;
      padding:40px 20px;
      font:x-small Georgia,Serif;
      text-align:center;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }


    7. Klik tombol Pratinjau untuk melihat perubahan.

    8. Jika sudah OK, klik tombol Simpan Perubahan Template.

    9. Selesai.



    Untuk mengganti background gambar/image pada template klasik:
    Misal di sini saya punya alamat gambar:

    http://i1008.photobucket.com/albums/af208/pribumi182/Imagexxx.gif


    Dengan ukuran seperti ini:



    Untuk gambar disarankan jangan terlalu besar, walaupun kecil akan memenuhi template. Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

    1. Sign in

    2. Klik menu Template.

    3. Klik menu Edit HTML.

    4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data.

    5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :



    6. body {
      background:#fff url("http://i1008.photobucket.com/albums/af208/pribumi182/Imagexxx.gif");
      margin:0;
      padding:40px 20px;
      font:x-small Georgia,Serif;
      text-align:center;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }


      Klik tombol Pratinjau untuk melihat perubahan.

    7. Jika sudah OK, klik tombol Simpan Perubahan Template.

    8. Selesai.



    Untuk template minima baru :

    1. sign in.

    2. Klik menu Layout.

    3. Klik menu Fon dan Warna.

    4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)

    5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah.

    6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN.

    7. Selesai.

    Mudah bukan?

    Untuk mengganti background pada template baru:

    1. Masuk ke blog sobat.

    2. Pilih tata letak.

    3. Klik edit HTML.

    4. Untuk antisipasi backup template dulu.

    5. Beri tanda centang pada expand template widged.

    6. Cari kode css seperti di bawah ini:



    7. body { background:$bgcolor;
      margin:0;
      font:x-small Georgia Serif;
      color:#333333;
      font-size/* */:/**/small;
      text-align: center;


      Tambahkan alamat gambar pada kode warna merah, hasilnya seperti di bawah ini:


      body{background:$bgcolorurl ("http://i1008.photobucket.com/albums/af208/pribumi182/Imagexxx.gif");
      margin:0;
      font:x-small Georgia Serif;
      color:#333333;
      font-size/* */:/**/small; font-size: /**/small;
      text-align: center;


    8. Simpan template

    Lihat hasilnya.



    Komentar :

    ada 1
    Wulan audy said...
    pada hari 

    tks tipsnya mas
    kalo background imagenya ingin memenuhi seluruh layar monitor.. cssnya apa ya ?
    mohon pencerahannya...
    tengkiu egen..
    http://rain-broccoli.blogspot.com

    Post a Comment